<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片上传和展示示例</title>
    <style>
        .image-preview {
            margin-top: 20px;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .image-preview img {
            max-width: 300px;
            max-height: 300px;
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
    <script>
        function previewImage() {
            const fileInput = document.getElementById('file');
            const previewContainer = document.getElementById('preview-container');
            const previewImage = document.getElementById('preview-image');
    
            const file = fileInput.files[0];
            const reader = new FileReader();
    
            reader.addEventListener('load', function() {
                previewImage.src = reader.result;
                previewContainer.style.display = 'block';
            }, false);
    
            if (file) {
                reader.readAsDataURL(file);
            }
        }
    </script>
</head>
<body>
    <h1>FUNFACEFX</h1>
    <video width="640" height="360" controls>
        <source src="/static/videos/8451bb6a5057e0151fa301fc01b4dc0b.mp4" type="video/mp4">
        您的浏览器不支持 HTML5 视频标签。
    </video>

    <h1>上传图片并展示</h1>
    <form id="cartoon_demo"  method="post" enctype="multipart/form-data">
        <input type="file" id="file" name="file" accept="image/*" onchange="previewImage()">
        <br><br>
        <input type="submit" value="上传">
    </form>

    <div class="image-preview" id="preview-container" style="display: none;">
        <h2>图片预览:</h2>
        <img id="preview-image" src="" alt="Image Preview">
    </div>

    <div class="image-preview">
        <h2>处理后的图片:</h2>
        <img id="processed-image" src="" alt="Image Preview">
        <p id="file-path"></p>
    </div> 
</body>

<script>
    

    $(document).ready(function() {
        $('#cartoon_demo').on('submit', function(e) {
            e.preventDefault();
         
            
            var img = document.getElementById("preview-image");
            data = {'img':img['src']}
            $.ajax({
                type: 'POST',
                url: '{% url "upload_file" %}',
                success: function(response) {
                    $('#processed-image').attr('src', response.processed_file_url);
                    $('#file-path').text('Processed Image Path: ' + response.file_url);
                },
                error: function(response) {
                    $('#file-path').text('An error occurred');
                }
            });
        });
    });
</script>

</html>
